<template>
	<view>
		<view class="list-item">
			<image v-if="type == 3" class="bg" src="https://image.39.net/quickapp/home/v1.9.0/Style_3.png"></image>
			<image v-if="type == 2" class="bg" src="https://image.39.net/quickapp/home/v1.9.0/Style_2.png"></image>
			<image v-if="type == 1" class="bg" src="https://image.39.net/quickapp/home/v1.9.0/Style_1.png"></image>
			<view class="info">
				<text class="title">{{ item.Title }}</text>
				<text class="desc">共{{ item.QCount }}道测试题</text>
				<text class="btn" @click="routerTo">开始测试</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		item: {
			type: Object,
			default: {
				Title: '月经异常可能是什么病？',
				QCount: '10',
				ExaminationId: 0,
				Visit: 0
			}
		},
		fid: {
			type: Number
		},
		type: {
			type: Number
		}
	},
	methods: {
		/**
		 * 跳转测试
		 */
		routerTo() {
			uni.navigateTo(
				{
					url: '/pages/index/test/detail/index'
				},
				{ id: this.item.ExaminationId, fid: this.fid }
			);
		}
	}
};
</script>

<style scoped lang="scss">
view {
	display: flex;
}
.list-item {
	box-shadow: 0upx 6upx 18upx rgba(66, 95, 152, 0.14);
	margin: 0 auto;
	width: 690upx;
	min-height: 250upx;
	background: #fff;
	position: relative;
	padding: 15upx;
	border-radius: 10upx;
	.info {
		z-index: 1;
		position: relative;
		width: 430upx;
		padding: 10upx 25upx;
		flex-direction: column;
		justify-content: space-between;
		.title {
			font-size: 34upx;
			line-height: 40upx;
			color: rgb(50, 52, 55);
			display: -webkit-box;
			overflow: hidden;
			white-space: normal;
			text-overflow: ellipsis;
			word-wrap: break-word;
			font-weight: 600;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.desc {
			font-size: 26upx;
			line-height: 50upx;
			color: rgb(102, 120, 156);
		}
		.btn {
			padding: 10upx 0;
			width: 176upx;
			justify-content: center;
			align-items: center;
			text-align: center;
			border-radius: 6upx;
			color: rgb(50, 145, 249);
			font-size: 26upx;
			line-height: 50upx;
			border: 1upx solid rgb(50, 145, 249);
			margin-bottom: 10upx;
		}
	}
	.bg {
		left: 15upx;
		top: 15upx;
		width: 660upx;
		height: 222upx;
		position: absolute;

		// height: 100%;
		// width: 100%;
	}
}
</style>
